<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成交员管理 - 后台管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="min-h-screen">
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">成交员管理</h1>
                        <p class="text-sm text-gray-600 mt-1">管理系统成交员信息、业绩和佣金</p>
                    </div>
                    <div class="flex space-x-3">
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                            <i class="fa fa-plus mr-2"></i>添加成交员
                        </button>
                        <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700" onclick="openCouponModal()">
                            <i class="fa fa-ticket mr-2"></i>生成优惠券
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 搜索栏 -->
            <div class="bg-white shadow rounded-lg p-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">成交员信息</label>
                        <input type="text" placeholder="成交员姓名/手机号/工号" class="w-full border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select class="w-full border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">全部状态</option>
                            <option value="1">正常</option>
                            <option value="2">暂停</option>
                            <option value="3">已冻结</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">等级</label>
                        <select class="w-full border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">全部等级</option>
                            <option value="1">初级成交员</option>
                            <option value="2">中级成交员</option>
                            <option value="3">高级成交员</option>
                            <option value="4">金牌成交员</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">注册时间</label>
                        <input type="date" class="w-full border rounded-md px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                <div class="flex justify-end space-x-4 mt-4">
                    <button class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        <i class="fa fa-search mr-2"></i>搜索
                    </button>
                    <button class="px-6 py-2 border rounded-md hover:bg-gray-50">
                        <i class="fa fa-refresh mr-2"></i>重置
                    </button>
                    <button class="px-6 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                        <i class="fa fa-download mr-2"></i>导出数据
                    </button>
                </div>
            </div>

            <!-- 数据概览 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-blue-100">
                            <i class="fa fa-users text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <div class="text-sm text-gray-500">总成交员数</div>
                            <div class="text-2xl font-bold mt-1">234</div>
                            <div class="text-sm text-green-600 mt-1">较上月 +5%</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-green-100">
                            <i class="fa fa-check-circle text-green-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <div class="text-sm text-gray-500">活跃成交员</div>
                            <div class="text-2xl font-bold mt-1">189</div>
                            <div class="text-sm text-green-600 mt-1">活跃率 80.8%</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-yellow-100">
                            <i class="fa fa-shopping-cart text-yellow-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <div class="text-sm text-gray-500">本月成交订单</div>
                            <div class="text-2xl font-bold mt-1">1,456</div>
                            <div class="text-sm text-green-600 mt-1">较上月 +12%</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="flex items-center">
                        <div class="p-3 rounded-full bg-purple-100">
                            <i class="fa fa-money text-purple-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <div class="text-sm text-gray-500">本月佣金总额</div>
                            <div class="text-2xl font-bold mt-1">¥45,678</div>
                            <div class="text-sm text-green-600 mt-1">较上月 +8%</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 成交员列表 -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">成交员列表</h3>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    成交员信息
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    等级/状态
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    业绩数据
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    佣金统计
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    客户管理
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    注册时间
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <!-- 成交员1 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=张成交&background=3B82F6&color=fff" alt="">
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">张成交</div>
                                            <div class="text-sm text-gray-500">13800138001</div>
                                            <div class="text-xs text-gray-400">工号: S001</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex flex-col space-y-1">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            金牌成交员
                                        </span>
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            正常
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>成交订单: <span class="font-medium text-blue-600">156单</span></div>
                                        <div>成交金额: <span class="font-medium text-green-600">¥89,456</span></div>
                                        <div>转化率: <span class="font-medium">15.2%</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>总佣金: <span class="font-medium text-green-600">¥8,945</span></div>
                                        <div>本月: <span class="font-medium">¥1,234</span></div>
                                        <div>待结算: <span class="font-medium text-orange-600">¥567</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>绑定客户: <span class="font-medium">89人</span></div>
                                        <div>活跃客户: <span class="font-medium text-green-600">67人</span></div>
                                        <div>复购率: <span class="font-medium">45.6%</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    2024-01-15
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <button class="text-blue-600 hover:text-blue-800" title="查看详情" onclick="viewSalesperson('S001')">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-green-600 hover:text-green-800" title="编辑" onclick="editSalesperson('S001')">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-purple-600 hover:text-purple-800" title="佣金详情" onclick="viewCommission('S001')">
                                            <i class="fa fa-money"></i>
                                        </button>
                                        <button class="text-orange-600 hover:text-orange-800" title="客户管理" onclick="manageCustomers('S001')">
                                            <i class="fa fa-users"></i>
                                        </button>
                                        <button class="text-red-600 hover:text-red-800" title="冻结" onclick="toggleStatus('S001', 'freeze')">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 成交员2 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=李销售&background=10B981&color=fff" alt="">
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">李销售</div>
                                            <div class="text-sm text-gray-500">13900139002</div>
                                            <div class="text-xs text-gray-400">工号: S002</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex flex-col space-y-1">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                            高级成交员
                                        </span>
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            正常
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>成交订单: <span class="font-medium text-blue-600">89单</span></div>
                                        <div>成交金额: <span class="font-medium text-green-600">¥56,789</span></div>
                                        <div>转化率: <span class="font-medium">12.8%</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>总佣金: <span class="font-medium text-green-600">¥5,679</span></div>
                                        <div>本月: <span class="font-medium">¥890</span></div>
                                        <div>待结算: <span class="font-medium text-orange-600">¥234</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>绑定客户: <span class="font-medium">56人</span></div>
                                        <div>活跃客户: <span class="font-medium text-green-600">42人</span></div>
                                        <div>复购率: <span class="font-medium">38.2%</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    2024-02-20
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <button class="text-blue-600 hover:text-blue-800" title="查看详情" onclick="viewSalesperson('S002')">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-green-600 hover:text-green-800" title="编辑" onclick="editSalesperson('S002')">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-purple-600 hover:text-purple-800" title="佣金详情" onclick="viewCommission('S002')">
                                            <i class="fa fa-money"></i>
                                        </button>
                                        <button class="text-orange-600 hover:text-orange-800" title="客户管理" onclick="manageCustomers('S002')">
                                            <i class="fa fa-users"></i>
                                        </button>
                                        <button class="text-red-600 hover:text-red-800" title="冻结" onclick="toggleStatus('S002', 'freeze')">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 成交员3 -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=王业务&background=F59E0B&color=fff" alt="">
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">王业务</div>
                                            <div class="text-sm text-gray-500">13700137003</div>
                                            <div class="text-xs text-gray-400">工号: S003</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex flex-col space-y-1">
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            中级成交员
                                        </span>
                                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            暂停
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>成交订单: <span class="font-medium text-blue-600">45单</span></div>
                                        <div>成交金额: <span class="font-medium text-green-600">¥28,900</span></div>
                                        <div>转化率: <span class="font-medium">9.5%</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>总佣金: <span class="font-medium text-green-600">¥2,890</span></div>
                                        <div>本月: <span class="font-medium">¥456</span></div>
                                        <div>待结算: <span class="font-medium text-orange-600">¥123</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="space-y-1">
                                        <div>绑定客户: <span class="font-medium">32人</span></div>
                                        <div>活跃客户: <span class="font-medium text-yellow-600">18人</span></div>
                                        <div>复购率: <span class="font-medium">25.0%</span></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    2024-03-10
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <button class="text-blue-600 hover:text-blue-800" title="查看详情" onclick="viewSalesperson('S003')">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        <button class="text-green-600 hover:text-green-800" title="编辑" onclick="editSalesperson('S003')">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button class="text-purple-600 hover:text-purple-800" title="佣金详情" onclick="viewCommission('S003')">
                                            <i class="fa fa-money"></i>
                                        </button>
                                        <button class="text-orange-600 hover:text-orange-800" title="客户管理" onclick="manageCustomers('S003')">
                                            <i class="fa fa-users"></i>
                                        </button>
                                        <button class="text-green-600 hover:text-green-800" title="启用" onclick="toggleStatus('S003', 'activate')">
                                            <i class="fa fa-play"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            上一页
                        </button>
                        <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            下一页
                        </button>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">234</span> 条记录
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fa fa-chevron-left"></i>
                                </button>
                                <button class="bg-blue-600 border-blue-600 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                    1
                                </button>
                                <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                    2
                                </button>
                                <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                    3
                                </button>
                                <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fa fa-chevron-right"></i>
                                </button>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 生成优惠券模态框 -->
    <div id="couponModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900">生成优惠券</h3>
                    <button onclick="closeCouponModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <form class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">选择成交员</label>
                        <select class="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">请选择成交员</option>
                            <option value="S001">张成交 (S001)</option>
                            <option value="S002">李销售 (S002)</option>
                            <option value="S003">王业务 (S003)</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">优惠券类型</label>
                        <select class="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="amount">满减券</option>
                            <option value="discount">折扣券</option>
                            <option value="gift">赠品券</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">优惠金额/折扣</label>
                        <input type="number" placeholder="请输入金额或折扣" class="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">使用门槛</label>
                        <input type="number" placeholder="满多少可用" class="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">有效期</label>
                        <div class="grid grid-cols-2 gap-2">
                            <input type="date" class="border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <input type="date" class="border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">发放数量</label>
                        <input type="number" placeholder="请输入数量" value="1" class="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </form>
                
                <div class="flex justify-end space-x-3 mt-6">
                    <button onclick="closeCouponModal()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                        取消
                    </button>
                    <button onclick="generateCoupon()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        生成优惠券
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 查看成交员详情
        function viewSalesperson(id) {
            alert('查看成交员详情: ' + id);
            // 这里可以跳转到详情页面或打开模态框
        }
        
        // 编辑成交员
        function editSalesperson(id) {
            alert('编辑成交员: ' + id);
            // 这里可以跳转到编辑页面或打开编辑模态框
        }
        
        // 查看佣金详情
        function viewCommission(id) {
            alert('查看佣金详情: ' + id);
            // 这里可以跳转到佣金详情页面
        }
        
        // 管理客户
        function manageCustomers(id) {
            alert('管理客户: ' + id);
            // 这里可以跳转到客户管理页面
        }
        
        // 切换状态
        function toggleStatus(id, action) {
            const actionText = action === 'freeze' ? '冻结' : '启用';
            if (confirm(`确定要${actionText}该成交员吗？`)) {
                alert(`${actionText}成功: ` + id);
                // 这里可以发送AJAX请求更新状态
            }
        }
        
        // 打开优惠券模态框
        function openCouponModal() {
            document.getElementById('couponModal').classList.remove('hidden');
        }
        
        // 关闭优惠券模态框
        function closeCouponModal() {
            document.getElementById('couponModal').classList.add('hidden');
        }
        
        // 生成优惠券
        function generateCoupon() {
            alert('优惠券生成成功！');
            closeCouponModal();
            // 这里可以发送AJAX请求生成优惠券
        }
    </script>
</body>
</html>